<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东图片链接</title>
    <link rel="stylesheet" href="../03layout/css/restcss2011.css">
   
    <style>
        body{
            background-color: orange;
        }
     .img-list{
         width: 150px;
         /* 设置宽度 */
         height: 400px;
         /* 设置高度 */
         overflow:hidden ;
         /* 裁剪 
         使ul在页面中居中（实际示例中不需要这么做）*/
         margin: auto;
         background-color:#bfa ;
     }
     /* 设置li的位置 */
     .img-list li:not(:last-child){
         margin-bottom: 9px;
     }
     /* 设置图片大小 */
     .img-list img{
         width: 100%;
     }

    </style>
</head>
<body>
    <!-- <div>


    <img  width="100px" height="100px" src="./resourse/off.png" alt="">
<img width="100px" height="100px" src="./resourse/on.png" alt="">
    <img width="100px" height="100px" src="./resourse/time.jpg" alt="">
</div> -->
<ul class="img-list">
    <li>
        <a href="#1">
            <img src="./resourse/1img/6f0249075d80574b.jpg" alt="加载失败">
        </a>
    </li>

    <li>
        <a href="#2">
            <img src="./resourse/1img/fbdead9b5857c2f6.jpg" alt="">
        </a>
    </li>

    <li><a href="#3">
        <img src="./resourse/1img/time.jpg" alt="">
    </a>
    </li>
</ul>

</body>
</html>